<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>直播</title>
    <script src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/static/js/clipboard.min.js"></script>
    <script type="text/javascript">
        function copyUrl2() {
            var Url2 = document.getElementById("biao1");
            Url2.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            alert("已复制好，可贴粘。");
        }
    </script>
    <link rel="stylesheet" href="/static/css/common.css">
    <style type="text/css" media="screen">
        body:before {
            content: ' ';
            margin: 0;
            padding: 0;
            position: fixed;
            z-index: -1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: url('https://img.alicdn.com/imgextra/i2/379137982/TB2OPjUXFIkyKJjy0FgXXX0mFXa_!!379137982.jpg') no-repeat center center;
        }

        .bg {
            height: 100%;
            min-height: 1000px;
            background-size: cover;
            overflow: hidden;
            width: 100%;
        }

        header {
            padding-top: 2%;
            height: 40px;
            padding-bottom: 60px;
        }

        .line {
            position: fixed;
            top: 6px;
            left: 0;
            width: 31%;
            height: 30px;
            line-height: 30px;
            color: #fff;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .line p {
            line-height: 30px;
            padding-left: 10px;
        }

        .line img {
            vertical-align: top;
            width: 14%;
            margin-top: 3px;
        }

        .tou {
            width: 67%;
        }

        .tou ul li {
            width: 10%;
            border: 1px solid #fff;
            border-radius: 50%;
            float: right;
            margin-right: 4%;
            background: #fff;
        }

        .tou ul li img {
            width: 100%;
            border-radius: 50%;
            vertical-align: middle;
        }

        .jian {
            width: 4%;
            margin-right: 2%;
        }

        .jian img {
            width: 70%;
            vertical-align: middle;
        }

        .time {
            width: 100%;

        }

        .time p {
            margin: 0 auto;
            width: 45%;
            background-color: rgba(0, 0, 0, 0.3);
            height: 25px;
            line-height: 25px;
            color: #fff;
            text-align: center;
            border-radius: 25px;
        }

        .liao {
            width: 100%;
            margin-top: 10px;
            padding: 0 3%;
            height: auto;
            padding-bottom: 3%;
        }

        .liao .ath {
            width: 8%;
            border: 1px solid #fff;
            border-radius: 50%;
            margin-right: 4%;
            background: #fff
        }

        .liao .ath img {
            width: 100%;
            border-radius: 50%;
            vertical-align: middle;
        }

        .con-img {
            width: 160px;
            height: 250px;
            border-radius: 7px;

        }

        .con-img img {
            width: 160px;
            height: auto;
            border-radius: 7px;
        }

        .con-text {
            width: 260px;
            height: auto;
            border-radius: 7px;
            background: #fff;
            padding: 10px 10px 4px 10px;
        }

        .con-text img {
            width: 160px;
            height: auto;
            border-radius: 7px;
        }

        .yjfz {
            border-top: 1px dashed #ccc;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-top: 4%;

        }

        .yjfz input {
            background: #47ada9;
            color: #fff;
            height: 25px;
            line-height: 25px;
            text-align: center;
            width: 90px;
            border-radius: 25px;
        }

        .one {
            margin-top: 3%;
        }

        .tanchu {
            width: 100%;
            position: fixed;
            margin: 0 auto;
            height: 161px;

            text-align: center;
            top: 50%;
            right: 0;
            left: 0;
            bottom: 0;


            display: none;

        }

        .tanchu p {
            background-color: rgba(0, 0, 0, 0.6);

            line-height: 40px;
            color: #fff;
            text-align: center;
            width: 60%;
            font-size: 14px;
            margin: 0 auto;
            height: 40px;
            border-radius: 7px;

        }

        iframe {
            border-radius: 7px;
            background: #fff;
            height: 243px !important;
        }

        iframe body a img {
            height: 300px;
            border-radius: 7px;
        }

        textarea {
            width: 98%;
            border: none;
            min-height: 0px;
            overflow: scroll;
            font-family: '微软雅黑'
        }

        .drag_to_refresh {
            align-items: center;
            padding-left: 155px;
            background-color: #fff;
            color: #333;
            display: none;
        }

        .refresh {
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fff;
            color: #333;
            display: none;
        }

        @media screen and (min-width: 768px) {
            .line p {

                line-height: 55px;
                padding-left: 34px;
                font-size: 20px !important;
            }

            .line {
                top: 13px;
                height: 55px;
                line-height: 55px;

            }

            .liao .ath {
                width: 7%;

            }

            .con-img {
                width: 80%;
            }

            .con-img img {
                width: 240px;

            }

            .con-text {
                width: 320px;

            }

            .time p {

                width: 30%;

            }

            .tanchu p {

                width: 30%;

            }
        }

        @media screen and (max-width: 320px) {

            .line p {
                font-size: 12px;
            }

            .line img {

                margin-top: 5px;
            }

            .con-text {
                width: 220px;

            }

            .tanchu p {

                font-size: 12px;
                width: 65%;
                height: 30px;
                line-height: 30px;

            }
        }
    </style>
</head>

<body>

    <div class="bg">
        <div>
            <header>
                <!--在线人数-->
                <div class="line fl">
                    <p class="f14">
                        <img src="https://img.alicdn.com/imgextra/i4/379137982/TB2w3_PXU.iyKJjSspdXXbB_pXa_!!379137982.png"
                            alt="">
                        &nbsp;<span id="online_nums">1437</span>人在线
                    </p>
                </div>
                <!--箭头-->
                <div class="jian fr">
                    <img src="https://img.alicdn.com/imgextra/i3/379137982/TB2LX3HXG3PyuJjy1zkXXcjRFXa_!!379137982.png"
                        alt="">
                </div>
                <!--头像-->
                <div class="tou fr">
                    <ul>
                        <li>
                            <img src="https://img.alicdn.com/imgextra/i2/379137982/TB2vPCIX4olyKJjSZFDXXbNfpXa_!!379137982.jpg"
                                alt="">
                        </li>
                        <li>
                            <img src="https://img.alicdn.com/imgextra/i2/379137982/TB2q0DEarglyKJjSZFuXXaE6FXa_!!379137982.jpg"
                                alt="">
                        </li>
                        <li>
                            <img src="https://img.alicdn.com/imgextra/i3/379137982/TB2WTaJX_AlyKJjSZFhXXc8XFXa_!!379137982.jpg"
                                alt="">
                        </li>
                        <li>
                            <img src="https://img.alicdn.com/imgextra/i4/379137982/TB28qPPXU7iyKJjSszcXXavlpXa_!!379137982.jpg"
                                alt="">
                        </li>
                        <li>
                            <img src="https://img.alicdn.com/imgextra/i4/379137982/TB2dFARXHAPyuJjy0FjXXXhfFXa_!!379137982.jpg"
                                alt="">
                        </li>
                        <li>
                            <img src="https://img.alicdn.com/imgextra/i2/379137982/TB2JtKIX0wmyKJjSZFoXXbmBXXa_!!379137982.jpg"
                                alt="">
                        </li>
                    </ul>
                </div>

                <div class="clear">

                </div>
            </header>

            <!--时间-->
            <!--时间-->
            <p id="end_msg" style="color:grey;font-size:12px;text-align: center;width:100%;display: none">-----没有数据-----</p>
        </div>
    </div>

</body>

<input type="hidden" id='current_page' value="1">
<input type="hidden" id='group' value="3h5bd1a4e8d827a">
<!--   <script type="text/javascript"  src="http://zeptojs.com/zepto.min.js"></script>
<script type="text/javascript">


$(function () {
    var str = window.location.href;
        str = str.substring(str.lastIndexOf("/") + 1),
        getCookie = localStorage.getItem(str);
    if (getCookie) {
        $("html,body").scrollTop(getCookie);
    }
});
$(window).scroll(function () {
    var str = window.location.href;
    str = str.substring(str.lastIndexOf("/") + 1);
    var top = $(window).scrollTop();  
    localStorage.setItem(str, top);
});



</script> -->

<script type="text/javascript">
    $(function () {
        var str = window.location.href;
        str = str.substring(str.lastIndexOf("/") + 1);
        if ($.cookie(str)) {
            $("html,body").animate({ scrollTop: $.cookie(str) }, 1000);
        }
        else {
        }
    })
    $(window).scroll(function () {
        var str = window.location.href;
        str = str.substring(str.lastIndexOf("/") + 1);
        var top = $(document).scrollTop();
        $.cookie(str, top, { path: '/' });
        return $.cookie(str);
    })



</script>
<script type="text/javascript">
var group =  $('#group').val();
var url = decodeURI(window.location.pathname);//window.location.href
//var argsIndex = url.split("?=");
//group = argsIndex[1];
group =url.substring(url.lastIndexOf("/") + 1);

    var isSync = false;

    $(function () {
        $(window).scroll(function () {

            if ($(document).scrollTop() >= $(document).height() - $(window).height() - 1) {
                getHistoryMessage();
            }
        });
        setInterval("getNewMessage()", 1000 * 60);  //获取最新消息newUser
        setInterval("newUser()", 1000 * 60);
        init_clipboard();
        getHistoryMessage();
    });

    function init_clipboard() {
        var clipboard = new Clipboard('.copy', {
            target: function (e) {
                var id = $(e).parents('.liao').attr('data-id');
                return document.querySelector('.biao' + id);
            }
        });

        clipboard.on('success', function (e) {
            //显示完三秒之后消失
            $('.tanchu').show().delay(3000).fadeOut();

            /*console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);*/
            e.clearSelection();
        });
    }


    //点击复制切换
    function tt(e) {
        $("#wenan" + e).css('height', '1px');
        $("#biao" + e).css('width', '99%');
        $("#biao" + e).css('height', '200px');
        $("#biao" + e).css('min-height', '215px');
    }



    function getHistoryMessage() {
        if (isSync) {
            return false;
        }
        isSync = true; //正在同步
        // var nowPage = $('#current_page').val() ? parseInt($('#current_page').val()) : 1;
        //var group = $('#group').val();
        var url = 'http://api.lyhuilin.com/group_zhibo/zhibo_json_v2.php';
        // nowPage     = nowPage + 1;
        //  var data    = {page:nowPage, pageSize:5, group:group};
        var id = $('.liao:last').attr('data-id');                
        //alert(id);
        var data = { miid: id,  gidm5: group };
        //console.log(data);
        $.post(url, data, function (msg) {
            if (msg.code == 0 && msg.data.length > 0) {
                // $('#current_page').val(nowPage);
                var html = make_data_html(msg.data);
                $('#end_msg:first').before(html);//$('.liao:last').after(html);
                //init_clipboard();

            } else {
                $('#end_msg').show();
            }
            isSync = false;
        }, "json");
    }

    function make_data_html(data) {
        var html = '';
        $.each(data, function (i, v) {
            var time = unixtodate(v.goodsTime);
            var img_url = v.goodsPic;
            var id = v.id
            html += '<div class="time"><p>' + time + '</p></div><div class="tanchu"><p>复制成功，请打开<手淘>查看</p></div>';
            html += '<div class="liao" data-id=' + id + '>';
            if (img_url != '') {
                html += ' <div class="one ">\
                                <div class="ath fl">\
                                    <img src="https://img.alicdn.com/imgextra/i4/379137982/TB2v2KHX6ZnyKJjSZFLXXXWqpXa_!!379137982.png" alt="">\
                                </div>\
                                <div class="con-img fl">\
                                    <iframe class="iframe'+ id + '" data="' + img_url + '" style="height:300px;width: 160px;" scrolling="no" frameborder="0"></iframe>\
                                    <script type="text/javascript">\
                                        $(".iframe'+ id + '").contents().find("body").css({"margin":"0px"}).append(\'<a href="' + img_url + '" target="_blank"><img style="width:100%;height:auto;" src="' + img_url + '"></a>\')\
                                    <\/script>\
                                </div>\
                                <div class="clear" ></div>\
                            </div>';
            }
            if (v.goodsContent != '<空>' && v.goodsContent != '') {
                html += '<div class="one " >\
                                <div class="ath fl">\
                                    <img src="https://img.alicdn.com/imgextra/i4/379137982/TB2v2KHX6ZnyKJjSZFLXXXWqpXa_!!379137982.png" alt="">\
                                </div>\
                                <div class="con-text fl">\
                                    <div class="f14 wenan" id="wenan'+ id + '" >' + v.goodsContent + '<br/><br/></div>\
                                    <textarea   class="f14 wenan biao'+ id + '" style="width:1px;height:1px" id="biao' + id + '">' + v.goodsContent2 + '</textarea>\
                                    <div class="yjfz"> <input type="button" name="" value="一键复制" class="copy" onclick="tt('+ id + ')"> </div>\
                                </div>\
                                <div class="clear" ></div>\
                            </div>';
            }


            html += '</div>';
        });
        return html;
    }


    function unixtodate(unixTime) {
        //unixTime = parseInt(unixTime) + parseInt(8) * 60 * 60;

        var time = new Date(unixTime );//  var time = new Date(unixTime * 1000);
        //var year = time.getFullYear();
        var month = time.getMonth() + 1;
        //month   =   month < 10 ? '0'+month : month;
        var date = time.getDate();
        //date   =   date < 10 ? '0'+date : date;
        var hour = time.getHours();
        hour = hour < 10 ? '0' + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? '0' + minute : minute;
        var second = time.getSeconds();
        second = second < 10 ? '0' + second : second;

        return month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
    }

    function getNewMessage() {
        var id = $('.liao:first').attr('data-id');          
        var url = 'http://api.lyhuilin.com/group_zhibo/zhibo_json_v2.php';
        //var group = $('#group').val();
        var data = { maid: id, gidm5: group };
        var before_bottom_height = $(document).height() - $(document).scrollTop(); console.log($(document).scrollTop());
        $.post(url, data, function (msg) {
            //console.log(msg);
            if (msg.code == 0 && msg.data.length > 0) {
                var html = make_data_html(msg.data);
                $('.time:first').before(html);

                var new_top_height = $(document).height() - before_bottom_height; console.log(new_top_height);
                $(document).scrollTop(new_top_height);
                //window.location.reload();
            }
        }, "json");
    }

    function newUser() {
        avatar_num = $('.tou ul').length;
        str = '<li><img src="/static/img/himg/' + Math.ceil(Math.random() * 5) + '.jpg"/></li>';
        $('.tou ul li:first').before(str);
        $('.tou ul li:last').remove();
        fc_num = parseInt($('#online_nums').html()) + Math.ceil(Math.random() * 4);
        $('#online_nums').html(fc_num);
    }
</script>


</html>